<template>
  <RecycleScroller
    class="scroller"
    :items="images"
    ref="scroller"
    :item-size="274"
    :itemSecondarySize="315"
    :buffer="200"
    gridItems="5"
    v-slot="{ item, index }"
    @update="change"
    @scroll-end="scrollEnd"
    :emitUpdate="true"
  >
    <div
      class="flex-center flex-wrap box"
      @click="select(item, index)"
      @dblclick="goDetails(item, index)"
      :class="item.id == selectItem.id ? 'selected' : ''"
    >
      <div class="flex-center" style="width: 100%">
        <el-button size="small">{{ item.level }}</el-button>
      </div>
      <ImageWithMarks
        :imageUrl="item.url"
        :marks="item.marks"
        :lineWidth="lineWidth"
        :displaySize="item.displaySize"
        :borderColor="lineColor"
        :cropExpandSize="cropExpandSize"
        :lineStyle="lineStyle"
      ></ImageWithMarks>
      <div
        style="width: 245px; height: 10px; background-color: red"
        :style="{
          backgroundColor: item.borderColor,
        }"
      ></div>
    </div>
  </RecycleScroller>
</template>

<script setup>
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";
import ImageWithMarks from "../../components/ImageWithMarksCopy.vue";
import { onMounted, ref, useId } from "vue";
import { useRouter } from "vue-router";
import { useControl } from "@/utils/useControl";
import { filePath as getFile } from "@/api/2d";
import { v4 as uuid } from "uuid";
// import { list } from "@/views/scroll/text";
const store = useCounterStore();
const { images, selectedIndex, item: selectItem, select } = useControl();
const { lineColor, cropExpandSize, lineWidth, lineStyle, list } =
  storeToRefs(store);
const router = useRouter();
const scroller = ref(null);

const change = (startIndex, endIndex) => {
  console.log(startIndex, endIndex);
  let nowList = images.value.slice(startIndex, endIndex);
  let idList = [];
  nowList.forEach((i) => {
    idList.push(i.id);
  });
  images.value.forEach((i) => {
    if (idList.includes(i.id) && !i.status) {
      getFile({ dir: "E:\c" }).then((res) => {
        i.url = res.data.images[0];
        i.status = true;
      });
    }
  });
};

const goDetails = (items, index) => {
  router.push({
    path: "/main",
    query: {
      items: JSON.stringify(items),
      index,
    },
  });
  selectedIndex.value = index;
};

const scrollEnd = () => {
  console.log("到底了");
};
</script>

<style scoped>
.scroller {
  height: 90vh;
  margin-top: 5px;
  width: 83vw;
  background-color: #383838;
}

.box {
  border: 2px solid #181818;
  width: 100%;
  height: 100%;
}
.selected {
  background: #777777;
}
</style>
